<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>斗地主记分牌</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js" defer></script>
    <script src="script.js" defer></script>
</head>
<body>

    <table>
        <thead>
            <tr>
                <th colspan="2">地主</th>
                <th colspan="2">农民</th>
                <th colspan="3">胜率</th>
                <th rowspan="2">总场数</th>
            </tr>
            <tr>
                <th>胜场</th>
                <th>败场</th>
                <th>胜场</th>
                <th>败场</th>
                <th>地主胜率</th>
                <th>农民胜率</th>
                <th>总胜率</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id="landlordWinCount">0</td>
                <td id="landlordLossCount">0</td>
                <td id="farmerWinCount">0</td>
                <td id="farmerLossCount">0</td>
                <td id="landlordWinRate">0%</td>
                <td id="farmerWinRate">0%</td>
                <td id="totalWinRate">0%</td>
                <td id="totalGames">0</td>
            </tr>
        </tbody>
    </table>
    <!-- 加入表格
        净胜场，消耗豆子数，总分数
        计算公式：
        净胜场 = 地主胜 + 农民胜 - 地主败 - 农民败
        消耗豆子数 = 地主败 * 1800 + 农民败 * 900
        总分数 = （地主胜- 地主败） * 1800 + （农民胜 - 农民败） * 900
    -->
    <table>
        <thead>
            <tr>
                <th>
                    <img src="img/star.png" alt="星星图标" style="width: 20px; height: 20px; margin-right: 8px;">净胜场
                </th>
                <th>
                    <img src="img/bean.png" alt="豆子图标" style="width: 20px; height: 20px; margin-right: 8px;">消耗豆子数
                </th>
                <th style="width: 30%;"">
                    总分数
                </th>
                <th>
                    开始时间
                </th>
                <th>
                    记录时间
                </th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td id="netWinCount">0</td>
                <td id="beanConsumption">0</td>
                <td id="totalScore">0</td>
                <td id="startTime">00:00:00</td>
                <td id="endTime">00:00:00</td>
            </tr>
        </tbody>
    </table>



    <div style="text-align: center; font-size: 12px; color: #888; margin-bottom: 10px;">
        你可以通过键盘 a s d f 来撤销操作
    </div>

    <div class="button-group">
        <button class="btn" onclick="updateCount('landlord', 'win')">地主胜场 +1 (z)</button>
        <button class="btn" onclick="updateCount('landlord', 'loss')">地主败场 +1 (x)</button>
        <button class="btn" onclick="updateCount('farmer', 'win')">农民胜场 +1 (c)</button>
        <button class="btn" onclick="updateCount('farmer', 'loss')">农民败场 +1 (v)</button>
    </div>

    <div class="container">
        <div id="pie">
            <!-- 饼图 -->
        </div>
        <div id="line">
            <!-- 折线图 -->
        </div>
    </div>



</body>
</html>
